<template>
    <div>
         <template v-for="(item,index) in targetEnumData">
              <div :key="index">
                <el-row :gutter="10">
                  <el-col :span="3">
                    <div style="padding-left:30px;padding-top: 10px;">枚举项：{{index+1}}</div>
                  </el-col>
                  <el-col :span="3"
                          style="padding:10px 5px 0 0;">
                    <el-button type="text"
                               icon="el-icon-delete"
                               @click.prevent="removeEnum(obj)">删除</el-button>
                  </el-col>
                </el-row>
                <el-row :gutter="10"
                        style="margin-left: 75px; margin-right: 50px;">
                  <el-col :span="8">
                    <el-form-item label="标识"
                                  prop="">
                      <el-input size="mini"
                                placeholder="请输入标识"
                                v-model="item['enumLabel']"
                                autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="描述"
                                  prop="enumValue">
                      <el-input size="mini"
                                placeholder="请输入描述"
                                v-model="item['enumValue']"
                                autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </template>
            <el-row :gutter="10"
                    style="margin-left:75px;">
              <el-col :span="3">
                <el-button type="text"
                           icon="el-icon-plus"
                           @click="addEnum">新增枚举项</el-button>
              </el-col>
            </el-row> 
          </div>
</template>
<script>
import { v4 as uuid } from 'uuid'
 export default {
    props: {
      data: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        targetEnumData:[],
        defalutEnum: {
        enumLabel: '',
        enumValue: '',
      },
      }
    },
    watch: {
      data: {
        handler(val) {
          this.targetEnumData = val
          if (val.length == 0) {
            this.addEnum()
          }
        },
        deep: true,
        immediate: true,
      },
    },
methods:{
    removeEnum(item) {
      const index = this.targetEnumData.findIndex((x) => x.id == item.id)
      if (index != -1) {
        this.targetEnumData.splice(index, 1)
      }
    },
    addEnum() {
        console.log('11',uuid);

     const obj= Object.assign(this.defalutEnum,{
            id:uuid()
        })
        console.log('22',uuid);
    //   const enumObj = Object.assign(this.defalutEnum, {
    //    id: uuid(),
    //   })
    //   this.targetEnumData.push(JSON.parse(JSON.stringify(enumObj)))
    },
}
}

</script>